<template>
  <el-dialog :title="areaForm.id ? '编辑区域' : '添加区域'" :visible="isVisible" @close="onCloseDialog">
    <!-- 区域表单 -->
    <el-form ref="areaFormRef" :model="areaForm" :rules="areaRules" size="medium">
      <!-- 区域名称 -->
      <el-form-item label="区域名称" prop="areaName">
        <el-input v-model="areaForm.areaName" placeholder="请输入区域名称" />
      </el-form-item>
      <!-- 车位数 -->
      <el-form-item label="车位数（个）" prop="spaceNumber">
        <el-input-number v-model="areaForm.spaceNumber" controls-position="right" :min="1" step-strictly placeholder="请输入车位个数" />
      </el-form-item>
      <!-- 面积 -->
      <el-form-item label="面积（m²）" prop="areaProportion">
        <el-input v-model="areaForm.areaProportion" placeholder="请输入面积" />
      </el-form-item>
      <!-- 关联计费规则 -->
      <el-form-item label="关联计费规则" prop="ruleId">
        <el-select v-model="areaForm.ruleId" placeholder="请选择关联计费规则" @visible-change="onValidateSelect">
          <el-option v-for="item in ruleList" :key="item.areaId" :label="item.ruleName" :value="item.ruleId" />
        </el-select>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input v-model="areaForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="onSaveArea">确认</el-button>
      <el-button @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addAreaAPI, editAreaAPI } from '@/api/car/cararea'
import { getRuleSelectListAPI } from '@/api/car/carrule'
export default {
  data() {
    return {
      isVisible: false,
      // 区域表单数据
      areaForm: {
        areaName: '', // 区域名称
        spaceNumber: undefined, // 车位数量
        areaProportion: '', // 区域面积
        ruleId: '', // 关联计费规则id
        remark: '' // 备注
      },
      // 区域表单验证规则
      areaRules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位个数', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '请输入区域面积', trigger: 'blur' },
          { pattern: /^(0|[1-9][0-9]*)(\.\d+)?$/, message: '请输入正数', trigger: 'blur' }
        ],
        ruleId: [
          { required: true, message: '请选择计费规则', trigger: 'blur' }
        ]
      },
      // 计费规则下拉列表数据项
      ruleList: []
    }
  },
  methods: {
    // 获取计费规则下拉列表数据项
    async getRuleSelectList() {
      this.ruleList = await getRuleSelectListAPI()
    },
    // 打开弹窗
    async open(row) {
      this.isVisible = true
      // 获取计费规则下拉列表数据项
      this.getRuleSelectList()
      // 根据row.id判断是添加区域还是编辑区域
      if (row.id) {
        // 获取区域详情
        this.areaForm = row
      }
    },
    // 关闭弹窗，重置表单
    onCloseDialog() {
      // 关闭弹窗
      this.isVisible = false
      // 重置表单数据
      this.areaForm = {
        areaName: '', // 区域名称
        spaceNumber: undefined, // 车位数量
        areaProportion: '', // 区域面积
        ruleId: '', // 关联计费规则id
        remark: '' // 备注
      }
    },
    onValidateSelect(isVisible) {
      if (!isVisible) {
        console.log('校验')
        this.$refs.areaFormRef.validateField('ruleId')
      }
    },
    // 保存区域
    async onSaveArea() {
      // 校验表单
      this.$refs.areaFormRef.validate(async valid => {
        if (valid) {
          // 根据 areaForm.id 判断是编辑还是新增
          if (this.areaForm.id) {
            // 处理表单数据
            delete this.areaForm.ruleName
            delete this.areaForm.hoverRuleName
            console.log(this.areaForm)
            // 编辑停车区域
            await editAreaAPI(this.areaForm)
            this.$message.success('编辑成功')
          } else {
            // 添加停车区域
            await addAreaAPI(this.areaForm)
            this.$message.success('添加成功')
          }
          // 关闭弹窗，重置表单
          this.onCloseDialog()
          // 发送消息给父组件，刷新区域列表
          this.$emit('refresh-area-list')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 600px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 60px;
      .el-select {
        width: 100%;
      }
      .el-input-number {
        width: 100%;
        .el-input__inner {
          text-align: left;
        }
      }
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
